<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef" :data="tableData">
      <!-- 商品信息列 -->
      <template #goodsInfo="{ record }">
        <div class="order-info">
          <div class="order-header">
            <div style="display: flex;">
              <span style="margin-right: 10vh;">
                订单编号：
                <span style="color: #409EFF; margin-left: 4px;">{{ record.order_no }}</span>
              </span>
              <span style="padding-left: 10vh;">
                下单时间：
                <span style="color: #666; margin-left: 4px;">{{ record.create_time }}</span>
              </span>
              <span style="padding-left: 10vh;">
                总金额：
                <span style="color: #ff6a00; margin-left: 4px;">¥ {{ record.total_price }}</span>
              </span>
              <span style="padding-left: 10vh;" :class="{'status-pending': record.status === 1, 'status-shipped': record.status === 2, 'status-completed': record.status === 3, 'status-canceled': record.status === 4}">
                {{ getStatusText(record.status) }}
              </span>
            </div>
          </div>
          
          <div style="padding: 10px 0; margin-top: 12px; display: flex;">
            <div class="mr-2">
              <img :src="record.goods_image" alt="商品图片" style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;">
            </div>
            <div>
              <div class="font-medium">{{ record.goods_name }}</div>
              <div class="text-red-500 mt-1">¥ {{ record.goods_price }}</div>
            </div>
          </div>
        </div>
      </template>
      
      <!-- 收货人信息列 -->
      <template #receiverInfo="{ record }">
        <div>
          <div>{{ record.receiver_name }}</div>
          <div class="text-gray">{{ record.receiver_phone }}</div>
          <div class="text-gray">{{ record.receiver_address }}</div>
        </div>
      </template>
      
      <!-- 订单状态列 -->
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
      </template>

      <!-- 操作列 -->
      <template #operationCell="{ record }">
        <a-space>
          <a-button type="text" size="mini" @click="viewOrderDetail(record)">详情</a-button>
          <a-button type="text" size="mini" @click="shipOrder(record)" v-if="record.status === 1">发货</a-button>
          <a-button type="text" size="mini" @click="cancelOrder(record)" v-if="record.status === 1">取消</a-button>
        </a-space>
      </template>
    </ma-crud>
  </div>
</template>

<script setup>
  import { ref, reactive, computed, onMounted, nextTick } from 'vue'
  import { Message } from '@arco-design/web-vue'
  const crudRef = ref()

  let isRecovery = computed(() => crudRef.value ? crudRef.value.isRecovery : false )

  // 订单状态处理
  const getStatusText = (status) => {
    const statusMap = {
      1: '待发货',
      2: '已发货',
      3: '已完成',
      4: '已取消'
    }
    return statusMap[status] || '未知状态'
  }

  const getStatusColor = (status) => {
    const colorMap = {
      1: 'orange',
      2: 'blue',
      3: 'green',
      4: 'red'
    }
    return colorMap[status] || 'gray'
  }

  // 订单操作方法
  const viewOrderDetail = (record) => {
    Message.info(`查看订单: ${record.order_no}`)
    // 实际应用中可以跳转到订单详情页或打开详情弹窗
  }

  const shipOrder = (record) => {
    Message.info(`发货订单: ${record.order_no}`)
    // 实际应用中调用发货API
  }

  const cancelOrder = (record) => {
    Message.info(`取消订单: ${record.order_no}`)
    // 实际应用中调用取消订单API
  }

  // 模拟订单数据
  const tableData = ref([
    {
      id: 1,
      order_no: '202403150821',
      goods_name: '华为 Mate 60 Pro',
      goods_price: 9998.00,
      goods_image: 'https://img0.baidu.com/it/u=2696293248,580916613&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667',
      total_price: 9998.00,
      receiver_name: '李四',
      receiver_phone: '13812345678',
      receiver_address: '上海市徐家汇区456号',
      status: 1,
      create_time: '2024-03-15 08:05:32'
    },
    {
      id: 2,
      order_no: '202403150004',
      goods_name: 'Sony WH-1000XM5',
      goods_price: 2999.00,
      goods_image: 'https://img1.baidu.com/it/u=3280498092,4284848912&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800',
      total_price: 2999.00,
      receiver_name: '张三',
      receiver_phone: '13912345678',
      receiver_address: '上海市浦东新区123号',
      status: 2,
      create_time: '2024-03-15 08:05:32'
    },
    {
      id: 3,
      order_no: '202403150765',
      goods_name: 'MacBook Pro 14',
      goods_price: 14999.00,
      goods_image: 'https://img2.baidu.com/it/u=1141304229,2676131263&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=653',
      total_price: 14999.00,
      receiver_name: '王五',
      receiver_phone: '13975632821',
      receiver_address: '广州市天河区789号',
      status: 3,
      create_time: '2024-03-15 07:30:45'
    },
    {
      id: 4,
      order_no: '202401150342',
      goods_name: '小米电视空调套装',
      goods_price: 5999.00,
      goods_image: 'https://img1.baidu.com/it/u=413003900,3650652884&fm=253&fmt=auto?w=670&h=447',
      total_price: 5999.00,
      receiver_name: '赵六',
      receiver_phone: '13567890123',
      receiver_address: '深圳市南山区101号',
      status: 4,
      create_time: '2024-01-15 07:30:45'
    }
  ])

  // CRUD配置 - 简化配置，移除可能导致问题的部分
  const crud = reactive({
    api: () => Promise.resolve({ rows: tableData.value, total: tableData.value.length }),
    showIndex: false,
    pageLayout: 'fixed',
    // 移除可能引起权限检查问题的配置
    rowSelection: { showCheckedAll: true },
    operationColumn: true,
    operationColumnWidth: 180,
    // 移除add、delete等需要权限的按钮配置
    add: { show: false },
    delete: { show: false },
    edit: { show: false },
    import: { show: false },
    export: { show: false },
    // 分页配置
    tablePagination: {
      show: true,
      total: tableData.value.length,
      current: 1,
      pageSize: 10,
      showTotal: true,
      showPageSize: true
    }
  })

  // 列配置
  const columns = reactive([
    { 
      title: '商品信息', 
      dataIndex: 'goodsInfo', 
      slot: true, 
      width: 350
    },
    { 
      title: '订单编号', 
      dataIndex: 'order_no', 
      search: true, 
      width: 150
    },
    { 
      title: '订单金额', 
      dataIndex: 'total_price', 
      width: 100,
      render: ({record}) => `¥ ${record.total_price}`
    },
    { 
      title: '收货人信息', 
      dataIndex: 'receiverInfo', 
      slot: true, 
      width: 200
    },
    {
      title: '订单状态', 
      dataIndex: 'status', 
      slot: true,
      search: true, 
      formType: 'select',
      dict: { data: [
        { label: '待发货', value: 1 },
        { label: '已发货', value: 2 },
        { label: '已完成', value: 3 },
        { label: '已取消', value: 4 }
      ]},
      width: 100
    },
    {
      title: '下单时间', 
      dataIndex: 'create_time', 
      width: 180,
      search: true,
      formType: 'range'
    }
  ])

  // 在组件挂载后刷新表格数据
  onMounted(() => {
    nextTick(() => {
      if (crudRef.value) {
        crudRef.value.refresh()
      }
    })
  })
</script>

<style scoped>
.status-mark {
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
}
.status-mark-info {
  background-color: #b2e281;
}
.status-mark-warning {
  background-color: #f3cf55;
}
.status-mark-success {
  background-color: #9dd3e8;
}
.status-mark-error {
  background-color: #f4b3b3;
}
.text-gray {
  color: #86909c;
  font-size: 12px;
}
.order-info {
  position: relative;
}
.order-header {
  background: #F3F4F6; 
  padding: 8px 12px; 
  margin-bottom: 12px;
  border-radius: 4px;
}
.status-pending {
  color: #e6a23c;
  font-weight: 500;
}
.status-shipped {
  color: #409eff;
  font-weight: 500;
}
.status-completed {
  color: #67c23a;
  font-weight: 500;
}
.status-canceled {
  color: #f56c6c;
  font-weight: 500;
}
.font-medium {
  font-weight: 500;
}
.mr-2 {
  margin-right: 8px;
}
.mt-1 {
  margin-top: 4px;
}
.text-red-500 {
  color: #ff6a00;
}
</style>